<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.student_no" clearable placeholder="学号" style="width: 150px" class="filter-item"/>
      <el-select v-if="user_type == 1" v-model="listQuery.status" clearable placeholder="状态" class="filter-item">
        <el-option v-for="(value, index) in status_list" :key="index" :value="value.id" :label="value.title"/>
      </el-select>
      <el-select v-if="user_type == 2" v-model="listQuery.status" clearable placeholder="状态" class="filter-item">
        <el-option v-for="(value, index) in status_list1" :key="index" :value="value.id" :label="value.title"/>
      </el-select>
      <el-button type="primary" class="filter-item" @click="handleFilter">搜索</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border highlight-current-row>
      <el-table-column type="selection"/>
      <el-table-column label="ID">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="学号">
        <template slot-scope="scope">{{ scope.row.student_no }}</template>
      </el-table-column>
      <el-table-column label="姓名">
        <template slot-scope="scope">{{ scope.row.username }}</template>
      </el-table-column>
      <el-table-column label="专业">
        <template slot-scope="scope">{{ scope.row.zhuanye }}</template>
      </el-table-column>
      <el-table-column label="宿舍楼">
        <template slot-scope="scope">{{ scope.row.house_id }}</template>
      </el-table-column>
      <el-table-column label="宿舍">
        <template slot-scope="scope">{{ scope.row.room_id }}</template>
      </el-table-column>
      <el-table-column v-if="user_type == 1" label="状态">
        <template slot-scope="scope"> {{ scope.row.status == 0? '未处理' : (scope.row.status==1?'同意':'拒绝') }}</template>
      </el-table-column>
      <el-table-column v-if="user_type == 2" label="状态">
        <template slot-scope="scope"> {{ scope.row.status == 1? '未处理' : (scope.row.status==3?'同意':'拒绝') }}</template>
      </el-table-column>
      <el-table-column v-if="user_type == 1" label="备注">
        <template slot-scope="scope"> {{ scope.row.teach_remark }}</template>
      </el-table-column>
      <el-table-column v-if="user_type == 2" label="备注">
        <template slot-scope="scope"> {{ scope.row.yuanzhang_remark }}</template>
      </el-table-column>
      <el-table-column label="申请理由">
        <template slot-scope="scope">{{ scope.row.reason }}</template>
      </el-table-column>
      <el-table-column label="申请时间">
        <template slot-scope="scope">{{ scope.row.create_time }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button v-if="user_type == 1" :disabled="scope.row.status !== 0" type="primary" size="mini" @click="handleReview(scope.row.id)">
            {{ scope.row.status == 0? '处理' : (scope.row.status==1?'同意':'拒绝') }}
          </el-button>
          <el-button v-if="user_type == 2" :disabled="scope.row.status !== 1" type="primary" size="mini" @click="handleReview(scope.row.id)">
            {{ scope.row.status == 1? '处理' : (scope.row.status==3?'同意':'拒绝') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData"/>
    <el-dialog :visible.sync="dialogVisible" title="编辑">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 800px; margin-left:50px;">
        <el-form-item label="操作：" prop="status">
          <el-radio-group v-if="user_type == 1" v-model="temp.status">
            <el-radio :label="1">同意</el-radio>
            <el-radio :label="2">拒绝</el-radio>
          </el-radio-group>
          <el-radio-group v-if="user_type == 2" v-model="temp.status">
            <el-radio :label="3">同意</el-radio>
            <el-radio :label="4">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="temp.status==2 && user_type == 1" label="备注：" prop="teach_remark">
          <el-input v-model="temp.teach_remark" style="width: 300px"/>
        </el-form-item>
        <el-form-item v-if="temp.status==4 && user_type == 2" label="备注：" prop="yuanzhang_remark">
          <el-input v-model="temp.yuanzhang_remark" style="width: 300px"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveData">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Pagination from '@/components/Pagination'
import { getList, detail, save } from '@/api/changeRoom'
export default {
  name: 'Index',
  components: { Pagination },
  data() {
    const checkStatus = (rules, value, callback) => {
      if (value == 0) {
        callback(new Error('操作状态必选'))
      } else {
        callback()
      }
    }
    return {
      listQuery: {
        page: 1,
        limit: 20,
        student_no: '',
        status: ''
      },
      list: [],
      status_list: [
        {
          id: 0,
          title: '未处理'
        },
        {
          id: 1,
          title: '通过'
        },
        {
          id: 2,
          title: '拒绝'
        }
      ],
      status_list1: [
        {
          id: 1,
          title: '未处理'
        },
        {
          id: 3,
          title: '通过'
        },
        {
          id: 4,
          title: '拒绝'
        }
      ],
      listLoading: true,
      dialogVisible: false,
      rules: {
        status: [{ required: true, validator: checkStatus, trigger: 'change' }],
        teach_remark: [{ required: true, message: '拒绝理由必填', trigger: 'change' }],
        yuanzhang_remark: [{ required: true, message: '拒绝理由必填', trigger: 'change' }]
      },
      temp: {
        id: undefined,
        uid: undefined,
        status: '',
        reason: ''
      },
      total: 0
    }
  },
  computed: {
    //     user_type =》1 老师  2 =》 院长
    ...mapGetters([
      'user_type'
    ])
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getList(this.listQuery).then(res => {
        this.listLoading = false
        this.list = res.data.list
        this.total = res.data.total
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.fetchData()
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        uid: undefined,
        status: '',
        reason: ''
      }
    },
    handleReview(id) {
      this.resetTemp()
      detail({ id }).then(res => {
        this.temp = res.data
        this.dialogVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      })
    },
    saveData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          save(this.temp).then(res => {
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success',
              duration: 2000
            })
            this.dialogVisible = false
            this.fetchData()
          })
        }
      })
    }
  }

}
</script>

<style scoped>

</style>
